<template>
	<view class="container">
		<view class="forgot">
			<view class="forgot_name">
				输入手机号
			</view>
			<u-input type="number" placeholder="请输入手机号" border="surround" disabled v-model="mobile" fontSize='14'
				@change="change" class="textinput"></u-input>
		</view>
		<view class="forgot">
			<view class="forgot_name">
				输入新{{title}}密码
			</view>
			<u-input placeholder="请输入新支付密码" v-if="type==1" border="surround" maxlength="6" v-model="pay" fontSize='14'
				type='password' @change="change" class="textinput"></u-input>
			<u-input placeholder="请输入新密码" v-else border="surround" v-model="pwd" fontSize='14' type='password'
				@change="change" class="textinput"></u-input>
		</view>
		<view class="forgot">
			<view class="forgot_name">
				再次输入新{{title}}密码
			</view>
			<u-input placeholder="请输入新支付密码" v-if="type==1" border="surround" maxlength="6" v-model="repay" fontSize='14'
				type='password' @change="change" class="textinput"></u-input>
			<u-input placeholder="请输入新密码" v-else border="surround" v-model="repwd" fontSize='14' type='password'
				@change="change" class="textinput"></u-input>
		</view>
		<view class="forgot">
			<view class="forgot_name">
				输入验证码
			</view>
			<u-input placeholder="输入验证码" border="surround" v-model="code" fontSize='14' type='code' @change="change"
				class="textinput">
				<template slot="suffix">
					<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"
						style="color: aliceblue;"></u-code>
					<u-button @tap="getCode" :text="tips" type="success" class="textbut"></u-button>
				</template>
			</u-input>
		</view>
		<view class="btnsub" :class="isbtn?'btnissub':''" @click="isbtn?confirm():''">
			提交
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				truename: '',
				key: '',
				value: '',
				logining: false,
				selectList: [],
				timer: null,
				event: 'register',
				config: 0,
				configObj: {},
				showPwd: false,
				tips: '获取验证码',
				mobile: '',
				isbtn: false,
				type: 0,
				pay: '',
				repay: '',
				pwd: "",
				repwd: "",
				code: '',
				username: '',
				title: ''
			}
		},
		onLoad(Option) {
			this.mobile = Option.phone
			this.event = Option.event
			this.type = Option.type
			if (Option.type == 1) {
				this.event = 'editPay'
			} else {
				this.event = 'editPwd'
			}
			this.title = Option.title
			let title = Option.title || ''
			uni.setNavigationBarTitle({
				title: title + '密码修改'
			})
		},
		onShow() {

		},
		methods: {
			...mapMutations(['login']),
			changeValue(e) {
				this.key = this.selectList[e.detail.value]
			},
			codeChange(text) {
				this.tips = text;
			},
			change() {
				const {
					username,
					mobile,
					pay,
					repay,
					pwd,
					repwd,
					code
				} = this
				if (this.type == 1) {
					if (mobile !== '' && pay !== '' && repay !== '' && code !== '') {
						this.isbtn = true
					} else {
						this.isbtn = false
					}
				} else {
					if (mobile !== '' && pwd !== '' && repwd !== '' && code !== '') {
						this.isbtn = true
					} else {
						this.isbtn = false
					}
				}

			},
			gotoApp() {
				location.href = this.configObj.download_address
			},
			async confirm() {
				let {
					username,
					mobile,
					pay,
					repay,
					pwd,
					repwd,
					code
				} = this;
				let parms1 = {
					username,
					mobile,
					pay,
					repay,
					code
				}
				let parms = {
					username,
					mobile,
					pwd,
					repwd,
					code
				}
				// if (username == '') {
				// 	this.$fun.msg('请输入用户名')
				// 	return
				// }
				if (mobile == '') {
					this.$fun.msg('请输入手机号')
					return
				}
				if (this.type == 1) {
					if (!pay) {
						this.$fun.msg('请输入新密码')
						return
					}
					if (!repay) {
						this.$fun.msg('请输入确认新密码')
						return
					}
					if (repay != pay) {
						this.$fun.msg('两次密码输入不一致')
						return
					}
				} else {
					if (!pwd) {
						this.$fun.msg('请输入新密码')
						return
					}
					if (!repwd) {
						this.$fun.msg('请输入确认新密码')
						return
					}
					if (repwd != pwd) {
						this.$fun.msg('两次密码输入不一致')
						return
					}
				}
				if (code == '') {
					this.$fun.msg('请输入验证码')
					return
				}
				if (this.type == 1) {
					await this.$fun.ajax.post('user/editPay', {
						...parms1
					}).then(res => {
						if (res.code == 1) {
							this.$fun.msg(res.msg)
							setTimeout(() => {
								uni.navigateBack({

								})
							}, 1000)
						}
					})
				} else {
					await this.$fun.ajax.post('user/editPwd', {
						...parms
					}).then(res => {
						if (res.code == 1) {
							this.$fun.msg(res.msg)
							setTimeout(() => {
								uni.navigateBack({

								})
							}, 1000)
						}
					})
				}

			},
			async getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					const res = await this.$fun.ajax.post('sms/send', {
						mobile: this.mobile,
						event: this.event
					})
					uni.hideLoading();
					if (res.code == 1) {
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast(res.msg);
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}

				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
		},
		destroyed() {
			clearInterval(this.timer)
			this.timer = null
		}

	}
</script>

<style lang='scss'>
	page {
		background: #F2EDED;
	}

	.forgot {
		padding-top: 40rpx;
		margin: 0rpx 30rpx;

		.forgot_name {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 45rpx;
			text-align: left;
			font-style: normal;
			margin-bottom: 20rpx;
		}

		.textinput {
			height: 88rpx;
			line-height: 88rpx;
			box-sizing: border-box;
			background: #F6F6F6;
			border-radius: 24rpx;
			border: none;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #CCCCCC;
			text-align: left;
			font-style: normal;
		}

		.textbut {
			border: none;
			background-color: #F6F6F6;
			font-weight: 400;
			font-size: 28rpx;
			color: #FF5534;
		}

		.rebut .u-button .u-button__text {
			// color: #999999;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx !important;
			color: #FF5534;
			text-align: left;
			font-style: normal;
		}
	}

	.btnsub {
		width: 560rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 50rpx;
		background: #EAEAEA;
		color: #fff;
		margin: 80rpx auto;
		text-align: center;
	}

	.btnissub {
		background: #FF5534;
	}
</style>